<template>
    <div class="spoor" ref="spoor">
        <div class="box" v-for="(item,index) in data" :key="index">
            <div class="spoor-date l" :style="{ width: leftwidth }" v-if="twoline">
                <p class="date">{{item.create_time.replace(/-/g,'/') | formatTime('y/m/d')}} </p>
                <p class="date">{{item.create_time.replace(/-/g,'/') | formatTime('h:i')}} </p>
            </div>
            <div class="spoor-date l" :style="{ width: leftwidth }" v-else>
                <p class="date">{{item.date +' '+item.timeRange[0] | formatTime(timeFormat)}}-{{item.date +' '+item.timeRange[1] | formatTime(timeFormat)}} </p>
            </div>
            <div class="spoor-header l">
                <div class="num"></div>
            </div>
            <div class="spoor-main l" ref="main" :style="{ width: rightWidth }">
                <div class="spoor-line"></div>
                <div class="spoor-main-content">
                    <h4 class="title" v-html="item.title"></h4>
                    <p class="description">
                        <span v-if="item.reason" v-html="item.reason"></span>
                        <span v-else v-html="item.desc"></span>
                        <span v-if="item.score" class="integral">+{{item.score}}</span>
                    </p>

                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            rightWidth: '',
            leftwidth: '',
        }
    },
    props: ['labelWidth', 'data', 'timeFormat', 'twoline'],
    mounted() {
        this.$nextTick(function () {
            // 根据组件传值 labelWidth 计算左右两边距离，不写固定宽度会导致内容高度无法自适应
            // if (!this.labelWidth) {
            //     console.log(1)
            //     this.rightWidth = this.$refs.spoor.offsetWidth - 66 + 'px'
            // }
            // if (this.labelWidth === 0) {
            //     this.rightWidth = this.$refs.spoor.offsetWidth - 66 + 'px'
            // }
            // if (this.labelWidth) {
            //      console.log(2)
            //     this.leftwidth = this.labelWidth + 'px'
            //     this.rightWidth = this.$refs.spoor.offsetWidth - this.labelWidth - 55 + 'px'
            // }
        })
    },
    created() {

    }
}
</script>

<style lang="scss" scoped>
.spoor {
  width: 100%;
  padding-top: 20px;
}
.l {
  float: left;
}
.title {
  //   line-height: 2em;
  font-size: 0.66rem;
}

.box {
  position: relative;
  vertical-align: top;
  //   overflow: auto;
  height: auto;
  font-size: 0;
  padding: 0 0.2rem;
  &:last-child {
    .spoor-line {
      display: none;
    }
  }
}

.spoor-date {
  position: relative;
  top: -0.08rem;
  display: block;
  text-align: right;
  padding-right: 0.4rem;
  width: 4rem;
  line-height: 1.8em;
  font-size: 0.6rem;
}

.spoor-header {
  position: relative;
  top: 0.18rem;
  width: 12px;
  height: 12px;
  border-top-left-radius: 999px; /* 左上角 */
  border-top-right-radius: 999px; /* 右上角 */
  border-bottom-right-radius: 999px; /* 右下角 */
  border-bottom-left-radius: 999px; /* 左下角 */
  border-radius: 999px;
  line-height: 12px;
  color: #fff;
  background-color: #74c5f0;
  border-color: #74c5f0;
  .num {
    display: block;
    background-color: #2c96d0;
    border: 2px solid #fff;
    border-top-left-radius: 999px; /* 左上角 */
    border-top-right-radius: 999px; /* 右上角 */
    border-bottom-right-radius: 999px; /* 右下角 */
    border-bottom-left-radius: 999px; /* 左下角 */
    border-radius: 999px;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.spoor-line {
  position: absolute;
  border-color: inherit;
  background-color: #74c5f0;
  width: 1px;
  box-sizing: border-box;
  top: 0.7rem;
  bottom: 0;
  left: -0.26rem;
  height: 100%;
}

.spoor-main {
  position: relative;
  top: -0.05rem;
  display: block;
  width: calc(100% - 4.6rem);
  font-size: 0.6rem;
  padding: 0 0 1rem 0.5rem;
  line-height: 1.6em;
}

.spoor-main-content .description {
  margin-top: 0.2rem;
  color: #a0a0a0;
}
.integral {
  margin-left: 0.5rem;
  color: orange;
}
</style>

